import React,{PureComponent} from 'react';
import {connect} from 'react-redux';
import {ListA, ListWrapperD} from '../style';
import school from '../../../icon/校园文化.png';
import {NavLink} from "react-router-dom";


class SchoolShow extends PureComponent {

    render(){
        const data={
            bar:this.props.bar.toJS()
        };
const schoolBar=data.bar[1].menu;
        return(

                <ListA className='school' >
                    <div style={{width:'100%',height:'60px'}}> <h1 className='title'><img style={{width:'43px',height:'38px',padding:'0 10px 5px 0'}} src={school} alt='' />校园文化</h1></div>
                    <ListWrapperD> <NavLink to={{pathname: '/ListPage', state: {url:schoolBar[0].menuUrl,bar:data.bar[1]}}}><img className='img' src={schoolBar[0].reserved} alt='' /><h1 style={{color:'#0d6fb8'}}>{schoolBar[0].menuValue}</h1></NavLink></ListWrapperD>
                    <ListWrapperD style={{width:'5%'}}/>
                    <ListWrapperD><NavLink to={{pathname: '/ListPage', state: {url:schoolBar[1].menuUrl,bar:data.bar[1]}}}><img className='img'  src={schoolBar[1].reserved} alt='' /><h1 style={{color:'#0d6fb8'}}>{schoolBar[1].menuValue}</h1></NavLink></ListWrapperD>
                    <ListWrapperD style={{width:'5%'}}/>
                    <ListWrapperD><NavLink to={{pathname: '/ListPage', state: {url:schoolBar[2].menuUrl,bar:data.bar[1]}}}><img className='img'  src={schoolBar[2].reserved} alt='' /><h1 style={{color:'#0d6fb8'}}>{schoolBar[2].menuValue}</h1></NavLink></ListWrapperD>
                    <ListWrapperD><NavLink to={{pathname: '/ListPage', state: {url:schoolBar[3].menuUrl,bar:data.bar[1]}}}><img className='img'  src={schoolBar[3].reserved} alt='' /><h1 style={{color:'#0d6fb8'}}>{schoolBar[3].menuValue}</h1></NavLink></ListWrapperD>
                    <ListWrapperD style={{width:'5%'}}/>
                    <ListWrapperD><NavLink to={{pathname: '/ListPage', state: {url:schoolBar[4].menuUrl,bar:data.bar[1]}}}><img className='img'  src={schoolBar[4].reserved} alt='' /><h1 style={{color:'#0d6fb8'}}>{schoolBar[4].menuValue}</h1></NavLink></ListWrapperD>
                    <ListWrapperD style={{width:'5%'}}/>
                    <ListWrapperD><NavLink to={{pathname: '/ListPage', state: {url:schoolBar[5].menuUrl,bar:data.bar[1]}}}><img className='img'  src={schoolBar[5].reserved} alt='' /><h1 style={{color:'#0d6fb8'}}>{schoolBar[5].menuValue}</h1></NavLink></ListWrapperD>
                </ListA>

        )

    }
}
const mapState=(state)=>({
    bar: state.getIn(['header','barMenu']),

});
export default connect(mapState,null)(SchoolShow);